<template>
  <section>
      <div class="loginBox">
          <p class="title">元气草后台登录</p>
          <el-form  label-width="0"
            :rules="loginRule" :model="loginFrom" ref="loginFrom">
            <el-form-item>
                <el-input v-model="loginFrom.userName" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="loginFrom.pwd" placeholder="密码" show-password></el-input>
            </el-form-item>
        </el-form>
        <el-button width="100%"  type="primary" size="medium" @click="loginUser">登录</el-button>
      </div>
  </section>
</template>

<script>
export default {
    data(){
        return{
            loginRule:{
                userName: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
            },
            loginFrom:{
                userName: '',
                pwd: ''
            }
        }
    },
    created(){
        this.$store.commit('setRouteMenuList', [ ])
        this.$store.commit('setRouteTabsValue', '')
    },
    methods:{
        async loginUser(){
             this.$refs['loginFrom'].validate(async (valid) => {
            if (valid) {
              // 编辑案例
              let res = await this.$store.dispatch("loginUser", {
                  userName: this.loginFrom.userName,
                  pwd: this.loginFrom.pwd
              });
              if (res.success) {
                  console.log(res.data.token)
                  this.$$cookie("token", res.data.token)
                  this.$router.replace({
                      name: 'cardBag'
                  })
              } else {
                this.$message.error(res.errorMessage || '网络异常');
              }
              this.editID = "";
            } else {
            return false;
            }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.loginBox{
    box-shadow: 0 0 25px #cac6c6;
    margin: 180px auto;
    width: 420px;
    padding: 35px 35px 15px;
    float: right;
    margin-right: 200px;
    margin-top: 250px;
    border-radius: 10px;
    .title{
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .el-button{
        width: 100%;
    }
}
</style>
